<template>
  <div class="default-main">
    <el-row :gutter="20">
      <el-col class="xs-mb-20" :xs="24" :sm="24">
        <el-tabs type="border-card" :before-leave="onBeforeLeave">
          <el-tab-pane class="config-tab-pane" label="设备远程运维">
            <el-row :gutter="20">
              <!-- 设备列表 -->
              <el-col class="xs-mb-20" :xs="24" :sm="24" :lg="24">
                <el-card shadow="always" header="设备列表">
                  <Devices @on-show-long-range-list="onShowList" />
                </el-card>
              </el-col>
              <!-- 远程运维项 -->
              <el-col class="xs-mb-20" :xs="24" :sm="24" :lg="24">
                <el-card shadow="always" header="远程运维项">
                  <template #header>
                    <div class="card-header">
                      <span>设备编号{{ state.row.code }}</span>
                      <div>
                        <el-button
                          v-if="state.showForm"
                          v-blur
                          @click="onAction"
                          class="table-header-operate"
                          type="primary"
                          :disabled="!state.isAdd"
                        >
                          <el-icon>
                            <Plus />
                          </el-icon>
                          <span class="table-header-operate-text"
                            >添加指令</span
                          >
                        </el-button>
                        <el-button
                          v-if="state.showForm"
                          v-blur
                          @click="order"
                          class="table-header-operate"
                          type="success"
                          plain
                        >
                          <el-icon><Pointer /></el-icon>
                          <span class="table-header-operate-text"
                            >下发指令</span
                          >
                        </el-button>
                        <el-button
                          v-if="state.showForm"
                          v-blur
                          @click="overViewData"
                          class="table-header-operate"
                          type="info"
                          plain
                        >
                          <el-icon><DataAnalysis /></el-icon>
                          <span class="table-header-operate-text"
                            >查看数据</span
                          >
                        </el-button>
                      </div>
                    </div>
                  </template>
                  <LongRangeSetFrom
                    v-if="state.showForm"
                    @on-put-l-r="openPut"
                  />
                  <div v-else>请选择设备获取远程控制参数</div>
                </el-card>
              </el-col>
              <el-col class="xs-mb-20" :xs="24" :sm="24" :lg="24">
                <el-card shadow="always" header="告警配置列表">
                  <template #header>
                    <div class="card-header">
                      <span>设备编号{{ state.row.code }}</span>
                      <el-button
                        v-if="state.showForm"
                        v-blur
                        @click="onActionWarn"
                        class="table-header-operate"
                        type="primary"
                      >
                        <el-icon>
                          <Plus />
                        </el-icon>
                        <span class="table-header-operate-text">添加</span>
                      </el-button>
                    </div>
                  </template>
                  <warnSetForm v-if="state.showForm" @onPutWarn="onPutWarn" />
                  <div v-else>请选择设备获取告警配置详情</div>
                </el-card>
              </el-col>
            </el-row>
          </el-tab-pane>
          <!-- 巡检记录 -->
          <!-- <el-tab-pane class="config-tab-pane" label="巡检"> </el-tab-pane> -->
          <!-- 点检记录 -->
          <!-- <el-tab-pane class="config-tab-pane" label="点检"></el-tab-pane> -->
          <!-- 保养记录 -->
          <!-- <el-tab-pane></el-tab-pane> -->
        </el-tabs>
      </el-col>
    </el-row>
    <!-- 巡检计化 -->
    <div style="margin-top: 20px" v-if="false">
      <el-row :gutter="20">
        <el-col class="xs-mb-20" :xs="24" :sm="24" :lg="24">
          <el-card shadow="always" header="新增巡检计划"> <TS /> </el-card>
        </el-col>
      </el-row>
    </div>
    <!-- 新增配置表单 运维表单-->
    <AddItem v-model="state.showAddForm" />
    <!-- 指令表单 -->
    <Order v-model="state.showOrderForm" />
    <!-- 新增配置表单 告警配置表单-->
    <AddItemWarn v-model="state.showAddWarnForm" />
    <!-- 查看数据表单 -->
    <Overview v-model="state.showOverviewForm" />
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, onBeforeUnmount, provide } from "vue";
import { baTableApi, getOverViewData, getDictArr } from "@/utils/common"; // 导入表格api方法生成器
import LongRangeSetFrom from "./components/longRange.vue"; //远程操作表单
import Devices from "./components/devices.vue"; //操作项表单
import AddItem from "./components/popupForm.vue"; //增加远程操作分组表单
import useCurrentInstance from "@/utils/useCurrentInstance";
import { useLongRange } from "@/store/backend/DeviceM/longRange";
import Order from "./components/orderPopupForm.vue";
import { useAccess } from "@/store/backend/DeviceM/access";
import TS from "@/components/TabsSteps/index.vue";
import { ElNotification } from "element-plus";
import { useCarbon } from "@/store/backend/EquipM/activeCarbon";
import warnSetForm from "./components/warnSet.vue";
import { useDeviceWarnSet } from "@/store/backend/DeviceM/warnSet";
import AddItemWarn from "./components/addWarnSet.vue";
import { FormRules } from "element-plus";
import Overview from "./components/overview.vue";
import { useDictionary } from "@/store/backend/tool/dictionary";
import { useNavTabs } from "@/store/navTabs";

const LR = useLongRange();
const warnSet = useDeviceWarnSet();
const { proxy } = useCurrentInstance(); //mitt
const dictionary = useDictionary();
const navTabs = useNavTabs();

//验证规则
const rules = reactive<FormRules>({
  name: [],
  group: [],
  title: [],
  type: [],
  weigh: [],
});

interface anyObj {
  [key: string]: any;
}
const state: {
  showAddForm: boolean; //是否显示给设备新增配置项
  showForm: boolean; //是否展示设备配置列表
  showOrderForm: boolean; //是否展示设备配置列表
  showAddWarnForm: boolean; //是否显示给设备新增告警配置项
  isAdd: boolean;
  SetList: anyObj[];
  row: anyObj; //设备基础信息
  repalcenum: any;
  overviewData: any;
  showOverviewForm: boolean;
  dictHandleOptions: any;
} = reactive({
  showAddForm: false,
  showForm: false,
  showOrderForm: false,
  showAddWarnForm: false,
  isAdd: true,
  SetList: [
    [
      {
        label: "风速量程",
        value: "FS001",
      },
      {
        label: "温度量程",
        value: "WD001",
      },
      {
        label: "压强量程",
        value: "YQ001",
      },
    ],
  ],
  row: {},
  repalcenum: "",
  overviewData: [],
  showOverviewForm: false,
  dictHandleOptions: [],
});

const onShowList = (row: any) => {
  state.showForm = true; //显示设备远程运维列表
  state.row = row;
};
// const showList = (row: any) => {
//   state.showForm = true; //显示设备告警配置列表
//   state.row = row;
// };

//打开编辑远程运维表单
const openPut = (data: any) => {
  proxy.eventBus.emit("editLR", data);
  state.showAddForm = true;
};
const onPutWarn = (data: any) => {
  proxy.eventBus.emit("editWarnSet", data);
  state.showAddWarnForm = true;
};

//当指令数据大于0时添加按钮隐藏
proxy.eventBus.on("noAdd", () => {
  console.log("noAdd触发");

  state.isAdd = false;
});
proxy.eventBus.on("isAdd", () => {
  console.log("isAdd触发");
  state.isAdd = true;
});
//打开添加远程运维表单
const onAction = () => {
  LR.opera = "add";
  proxy.eventBus.emit("addLR", state.row);
  state.showAddForm = true;
  warnSet.opera = "add";
  proxy.eventBus.emit("addWarnSet", state.row);
  // state.showAddForm = true;
};

//打开指令下发表单
const order = () => {
  console.log("state.row", state.row);
  // carbon.getCarbonItemById(state.row.id).then((res: any) => {
  //   state.repalcenum = res.rows.length > 0 ? res.rows[0].repalcenum : 0;
  // });
  LR.getOrderData({ eid: state.row.id, code: state.row.gatewaycode })
    .then((res: any) => {
      console.log("打开指令下发表单", res.data);
      let obj = {
        // volume: state.row.volume,
        // plates: state.row.plates,
        // cTime: state.row.cTime,
        // repalcenum: state.repalcenum,
        code: state.row.code,
        model: state.row.model,
      };
      proxy.eventBus.emit("order", { ...res.data, ...obj });
      state.showOrderForm = true;
    })
    .catch((err: any) => {
      ElNotification({
        type: "warning",
        message: "请完善相应指令配置",
      });
    });
  //!获取指令所需的数据
  // proxy.eventBus.emit("order", state.row);
  //获取指令数据
};

//获取运维查看数据字段字典值
const getDictOfLongrangeOverview = (): any => {
  //获取列表(字典)
  dictionary.getDictInfo("sys_longrange_overview").then(async (res: any) => {
    state.dictHandleOptions = getDictArr(res);
  });
};
//查看数据按钮
const overViewData = () => {
  LR.dataDetail(state.row.gatewaycode).then(async (res: any) => {
    state.overviewData = await getOverViewData(
      res.rows,
      state.dictHandleOptions
    );
    console.log("查看数据按钮", state.overviewData);

    state.showOverviewForm = true;
    proxy.eventBus.emit("overView", state.overviewData);
  });
};

//打开告警配置表单
const onActionWarn = () => {
  warnSet.opera = "add";
  proxy.eventBus.emit("addWarnSet", state.row);
  state.showAddWarnForm = true;
  // state.showAddForm = true;
};

onMounted(() => {
  getDictOfLongrangeOverview();
});

const onBeforeLeave = (newTabName: string | number) => {
  if (newTabName == "add_config") {
    state.showAddForm = true;
    return false;
  }
};
onBeforeUnmount(() => {
  proxy.eventBus.off("isAdd");
  proxy.eventBus.off("noAdd");
  proxy.eventBus.off("changeWarnId");
  proxy.eventBus.off("changLRId");
});

provide("navTabs", navTabs);
</script>
<style lang="scss" scoped>
.default-main {
  margin: var(--ba-main-space) var(--ba-main-space) 60px var(--ba-main-space);
}

@media screen and (max-width: 768px) {
  .xs-mb-20 {
    margin-bottom: 20px;
  }
}
.xs-mb-20 {
  margin-bottom: 30px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
